<template>
    <div>
        <van-nav-bar 
        title="确认订单" 
        @click-left="onClickLeft"
        >
            <van-icon name="arrow-left" slot="left" color='black' size='20px'/>
        </van-nav-bar>
        <div class='shadow'></div>
        <van-cell title="请填写收货信息" icon="location-o"  url="http://localhost:8080/#/addres"/>
        <div class='shadow1'></div>
         
             <div  v-for='item in list'>
                 <van-swipe-cell :right-width="60" class=''>
                 <van-card
                    :num="item.pnum"
                    :price="item.pprice"
                    desc="商品尺码"  
                    :title="item.pname"
                    :thumb="item.pimg"
                />
            <van-button square slot="right" type="danger" text="删除" @click="sap(item.pid)"/>
                </van-swipe-cell>
             </div>
            
           
        <div class='shadow1'></div>
        <van-row  type="flex" justify="end">
            <van-col span="6" offset="1"><span class='sp1'>商品金额</span></van-col>
            <van-col span="6" offset="12"><span class='sp2'>$ {{tot}}</span></van-col>
        </van-row>
        <div class='shadow'></div>
        <van-row  type="flex" justify="end">
            <van-col span="5" offset="1"><span class='sp1'>运费</span></van-col>
            <van-col span="3" offset="15"><span class='sp1'>免邮</span></van-col>
        </van-row>
        <div class='shadow'></div>
        <van-row  type="flex" justify="end">
            <van-col span="4" offset="1"><span class='sp1'>备注</span></van-col>
            <van-col span="18" offset="2"><span class='sp3'><input type="text" placeholder=" 填选：可输入留言或其他要求" class='ipt'>
               </span></van-col>
        </van-row>
        <div class='shadow1'></div>


        <van-row>
            <van-col span="3" offset="1"><span><van-icon name="alipay" slot="left" color='blue' size='28px'/></span></van-col>
            <van-col span="8" ><span class="sp4">支付宝支付</span></van-col>
            <van-col span="3"  offset="9">
                <van-radio-group v-model="radio">
                    <van-radio name="1"></van-radio>
                </van-radio-group>
            </van-col>
        </van-row>
        <div class='shadow'></div>
        <van-row>
            <van-col span="3" offset="1"><span><van-icon name="wechat" slot="left" color='blue' size='28px'/></span></van-col>
            <van-col span="8" ><span class="sp4">微信支付</span></van-col>
            <van-col span="3"  offset="9">
                <van-radio-group v-model="radio">
                    <van-radio name="2"></van-radio>
                </van-radio-group>
            </van-col>
        </van-row>

         <van-submit-bar
            :price='(tot-0)*100'
            button-text="提交订单"
            @submit="onSubmit"
            />
    </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name:'Sure',
    data () {
        return {
           imageURL:'https://img.yzcdn.cn/2.jpg',
           radio: '',
           list:'',
           data:'',
           tot:'',
           spid:''

        }
    },
    methods: {
        onClickLeft(){
            this.$router.go(-1)
        },
        onSubmit(){
            this.$router.push('/tiao')
        },
        sap(r, m) {
      console.log(r, m);
      // 删除购物车中的详情
      this.spid = r;
      console.log(this.spid);
      var _this = this;
      axios({
        method: "get",
        url: "http://jx.xuzhixiang.top/ap/api/cart-delete.php",
        params: {
          uid: 11003,
          pid: _this.spid
        }
      }).then(res => {
        console.log(res);
        // 根据pid删除对应的商品
        for (let j = 0; j < _this.data.length; j++) {
          if (_this.data[j].pid == _this.spid) {
            _this.data.splice(j, 1);
          }
        }
        // 刷新
        
        let totalnum = 0;
        let totalprice = 0;
        for(let i=0;i<_this.data.length;i++){
            totalprice +=parseInt(_this.data[i].pprice)*parseInt(_this.data[i].pnum) ;
        }
        this.tot=totalprice
        
        
      });
    },
        
    },
    mounted () {
        var _this=this
        // 查看购物车中的列表详情
        axios({
            method:'get',
            url:'http://jx.xuzhixiang.top/ap/api/cart-list.php',
            params:{
                id:11003
            }
        }).then(res=>{
            console.log(res.data.data)

            _this.list=res.data.data
            _this.data = res.data.data;
            console.log(_this.data)    

            console.log(this.data)
            let totalnum = 0;
            let totalprice = 0;
            for(let i=0;i<this.data.length;i++){
            totalprice +=parseInt(this.data[i].pprice)*parseInt(this.data[i].pnum) ;
            }
            this.tot=totalprice
            console.log(this.tot)
        }).catch(error=>{
            console.log(error)
        })
       
    }
}
</script>

<style scoped>
.shadow{
    width: 375px;
    height: 1px;
    background: silver;
    margin-top: 10px;
    margin-bottom: 5px;
}
.shadow1{
    width: 375px;
    height: 10px;
    background: silver;
    margin-top: 5px;
    margin-bottom: 5px;
}
.sp1{
    width: 72px;
    height: 25px;
    font-size: 18px;
    line-height: 25px;
    text-align: center
}
.sp2{
    width: 50px;
    height: 28px;
    font-size: 15px;
    line-height: 28px;
    text-align: center
}
.sp3{
    width: 183px;
    height: 20px;
    font-size: 14px;
    line-height: 20px;
    text-align: center
}
.sp4{
    width: 90px;
    height: 25px;
    font-size: 18px;
    line-height: 30px;
    text-align: center
} 
 .ck{
    zoom:170%;
    -webkit-appearance: radio;
    background:white
}
.ipt{
    width: 282px;
    height: 27px;
    border: none;
    outline: none;
}

</style>
